تصيير React: عرض المكونات وإدارة دورة حياتها

تعتمد React، وهي مكتبة JavaScript شهيرة لبناء واجهات المستخدم، على عملية تصيير فعالة لعرض المكونات وتحديثها. يعد فهم كيفية قيام React بتصيير المكونات وإدارة دورات حياتها وتحسين الأداء أمرًا بالغ الأهمية لبناء تطبيقات قوية وقابلة للتطوير. يستكشف هذا الدليل الشامل هذه المفاهيم بالتفصيل، ويقدم أمثلة عملية وأفضل الممارسات للمطورين في جميع أنحاء العالم.

فهم عملية التصيير في React

يكمن جوهر عمل React في بنيتها القائمة على المكونات و DOM الافتراضي (Virtual DOM). عندما تتغير حالة المكون أو خصائصه (props)، لا تقوم React بتعديل DOM الفعلي مباشرة. بدلاً من ذلك، تقوم بإنشاء تمثيل افتراضي لـ DOM، يسمى DOM الافتراضي. بعد ذلك، تقارن React الـ DOM الافتراضي بالنسخة السابقة وتحدد الحد الأدنى من التغييرات اللازمة لتحديث DOM الفعلي. هذه العملية، المعروفة باسم التسوية (reconciliation)، تحسن الأداء بشكل كبير.

الـ DOM الافتراضي والتسوية (Reconciliation)

إن DOM الافتراضي هو تمثيل خفيف الوزن وموجود في الذاكرة لـ DOM الفعلي. وهو أسرع وأكثر كفاءة في التعامل معه من DOM الحقيقي. عندما يتم تحديث مكون، تنشئ React شجرة DOM افتراضية جديدة وتقارنها بالشجرة السابقة. تتيح هذه المقارنة لـ React تحديد العقد المحددة في DOM الفعلي التي تحتاج إلى تحديث. ثم تقوم React بتطبيق هذه التحديثات الدنيا على DOM الحقيقي، مما يؤدي إلى عملية تصيير أسرع وأفضل أداءً.

خذ بعين الاعتبار هذا المثال المبسط:

السيناريو: نقرة على زر تقوم بتحديث عداد معروض على الشاشة.

بدون React: قد تؤدي كل نقرة إلى تحديث كامل لـ DOM، مما يعيد تصيير الصفحة بأكملها أو أجزاء كبيرة منها، مما يؤدي إلى بطء في الأداء.

مع React: يتم تحديث قيمة العداد فقط داخل DOM الافتراضي. تحدد عملية التسوية هذا التغيير وتطبقه على العقدة المقابلة في DOM الفعلي. يبقى باقي الصفحة دون تغيير، مما ينتج عنه تجربة مستخدم سلسة وسريعة الاستجابة.

كيف تحدد React التغييرات: خوارزمية المقارنة (Diffing Algorithm)

خوارزمية المقارنة في React هي قلب عملية التسوية. إنها تقارن بين شجرتي DOM الافتراضيتين الجديدة والقديمة لتحديد الاختلافات. تقوم الخوارزمية بعدة افتراضات لتحسين المقارنة:

• عنصران من نوعين مختلفين سينتجان شجرتين مختلفتين. إذا كانت العناصر الجذرية لها أنواع مختلفة (على سبيل المثال، تغيير <div> إلى <span>)، ستقوم React بإلغاء تحميل الشجرة القديمة وبناء الشجرة الجديدة من البداية.
• عند مقارنة عنصرين من نفس النوع، تنظر React إلى سماتهما لتحديد ما إذا كانت هناك تغييرات. إذا تغيرت السمات فقط، ستقوم React بتحديث سمات عقدة DOM الحالية.
• تستخدم React خاصية key لتحديد عناصر القائمة بشكل فريد. يتيح توفير خاصية key لـ React تحديث القوائم بكفاءة دون إعادة تصيير القائمة بأكملها.

يساعد فهم هذه الافتراضات المطورين على كتابة مكونات React أكثر كفاءة. على سبيل المثال، يعد استخدام المفاتيح (keys) عند تصيير القوائم أمرًا بالغ الأهمية للأداء.

دورة حياة مكون React

تتمتع مكونات React بدورة حياة محددة جيدًا، والتي تتكون من سلسلة من الدوال (methods) التي يتم استدعاؤها في نقاط محددة من وجود المكون. يتيح فهم دوال دورة الحياة هذه للمطورين التحكم في كيفية تصيير المكونات وتحديثها وإلغاء تحميلها. مع إدخال الـ Hooks، لا تزال دوال دورة الحياة ذات صلة، وفهم مبادئها الأساسية مفيد.

دوال دورة الحياة في المكونات الصنفية (Class Components)

في المكونات القائمة على الأصناف، تُستخدم دوال دورة الحياة لتنفيذ التعليمات البرمجية في مراحل مختلفة من حياة المكون. إليك نظرة عامة على دوال دورة الحياة الرئيسية:

• constructor(props): تُستدعى قبل تحميل المكون. تُستخدم لتهيئة الحالة (state) وربط معالجات الأحداث.
• static getDerivedStateFromProps(props, state): تُستدعى قبل التصيير، سواء عند التحميل الأولي أو التحديثات اللاحقة. يجب أن تُرجع كائنًا لتحديث الحالة، أو null للإشارة إلى أن الخصائص الجديدة لا تتطلب أي تحديثات للحالة. تعزز هذه الدالة تحديثات الحالة التي يمكن التنبؤ بها بناءً على تغييرات الخصائص.
• render(): دالة مطلوبة تُرجع JSX للتصيير. يجب أن تكون دالة نقية (pure function) للخصائص والحالة.
• componentDidMount(): تُستدعى فورًا بعد تحميل المكون (إدراجه في الشجرة). إنه مكان جيد لأداء التأثيرات الجانبية (side effects)، مثل جلب البيانات أو إعداد الاشتراكات.
• shouldComponentUpdate(nextProps, nextState): تُستدعى قبل التصيير عند استلام خصائص أو حالة جديدة. تتيح لك تحسين الأداء عن طريق منع عمليات إعادة التصيير غير الضرورية. يجب أن تُرجع true إذا كان يجب تحديث المكون، أو false إذا لم يكن كذلك.
• getSnapshotBeforeUpdate(prevProps, prevState): تُستدعى مباشرة قبل تحديث DOM. مفيدة لالتقاط معلومات من DOM (مثل موضع التمرير) قبل أن يتغير. سيتم تمرير القيمة المُرجعة كمعامل إلى componentDidUpdate().
• componentDidUpdate(prevProps, prevState, snapshot): تُستدعى فورًا بعد حدوث تحديث. إنه مكان جيد لأداء عمليات DOM بعد تحديث المكون.
• componentWillUnmount(): تُستدعى فورًا قبل إلغاء تحميل المكون وتدميره. إنه مكان جيد لتنظيف الموارد، مثل إزالة مستمعي الأحداث أو إلغاء طلبات الشبكة.
• static getDerivedStateFromError(error): تُستدعى بعد حدوث خطأ أثناء التصيير. تستقبل الخطأ كمعامل ويجب أن تُرجع قيمة لتحديث الحالة. تسمح للمكون بعرض واجهة مستخدم بديلة.
• componentDidCatch(error, info): تُستدعى بعد حدوث خطأ أثناء التصيير، في مكون فرعي. تستقبل الخطأ ومعلومات مكدس المكونات كمعاملات. إنه مكان جيد لتسجيل الأخطاء في خدمة تقارير الأخطاء.

مثال عملي على دوال دورة الحياة

خذ بعين الاعتبار مكونًا يجلب البيانات من واجهة برمجة تطبيقات (API) عند تحميله ويقوم بتحديث البيانات عندما تتغير خصائصه:

class DataFetcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (this.props.url !== prevProps.url) {
      this.fetchData();
    }
  }

  fetchData = async () => {
    try {
      const response = await fetch(this.props.url);
      const data = await response.json();
      this.setState({ data });
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  render() {
    if (!this.state.data) {
      return <p>Loading...</p>;
    }

    return <div>{this.state.data.message}</div>;
  }
}

في هذا المثال:

• componentDidMount() تجلب البيانات عند تحميل المكون لأول مرة.
• componentDidUpdate() تجلب البيانات مرة أخرى إذا تغيرت خاصية url.
• الدالة render() تعرض رسالة تحميل أثناء جلب البيانات ثم تعرض البيانات بمجرد توفرها.

دوال دورة الحياة ومعالجة الأخطاء

توفر React أيضًا دوال دورة حياة لمعالجة الأخطاء التي تحدث أثناء التصيير:

• static getDerivedStateFromError(error): تُستدعى بعد حدوث خطأ أثناء التصيير. تستقبل الخطأ كمعامل ويجب أن تُرجع قيمة لتحديث الحالة. هذا يسمح للمكون بعرض واجهة مستخدم بديلة.
• componentDidCatch(error, info): تُستدعى بعد حدوث خطأ أثناء التصيير في مكون فرعي. تستقبل الخطأ ومعلومات مكدس المكونات كمعاملات. هذا مكان جيد لتسجيل الأخطاء في خدمة تقارير الأخطاء.

تسمح لك هذه الدوال بالتعامل مع الأخطاء بأمان ومنع تطبيقك من الانهيار. على سبيل المثال، يمكنك استخدام getDerivedStateFromError() لعرض رسالة خطأ للمستخدم و componentDidCatch() لتسجيل الخطأ إلى خادم.

الـ Hooks والمكونات الوظيفية

توفر React Hooks، التي تم تقديمها في React 16.8، طريقة لاستخدام الحالة وميزات React الأخرى في المكونات الوظيفية. بينما لا تحتوي المكونات الوظيفية على دوال دورة حياة بنفس طريقة المكونات الصنفية، توفر الـ Hooks وظائف مكافئة.

• useState(): يسمح لك بإضافة حالة إلى المكونات الوظيفية.
• useEffect(): يسمح لك بأداء التأثيرات الجانبية في المكونات الوظيفية، على غرار componentDidMount() و componentDidUpdate() و componentWillUnmount().
• useContext(): يسمح لك بالوصول إلى سياق React.
• useReducer(): يسمح لك بإدارة الحالة المعقدة باستخدام دالة reducer.
• useCallback(): يُرجع نسخة مُخزنة (memoized) من دالة لا تتغير إلا إذا تغيرت إحدى الاعتماديات.
• useMemo(): يُرجع قيمة مُخزنة (memoized) لا يُعاد حسابها إلا عند تغير إحدى الاعتماديات.
• useRef(): يسمح لك بالاحتفاظ بالقيم بين عمليات التصيير.
• useImperativeHandle(): يخصص قيمة النسخة (instance) التي يتم كشفها للمكونات الأصل عند استخدام ref.
• useLayoutEffect(): نسخة من useEffect يتم تشغيلها بشكل متزامن بعد كل تعديلات DOM.
• useDebugValue(): يُستخدم لعرض قيمة للـ hooks المخصصة في أدوات مطوري React.

مثال على Hook useEffect

إليك كيفية استخدام useEffect() Hook لجلب البيانات في مكون وظيفي:

import React, { useState, useEffect } from 'react';

function DataFetcher({ url }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

    fetchData();
  }, [url]); // Only re-run the effect if the URL changes

  if (!data) {
    return <p>Loading...</p>;
  }

  return <div>{data.message}</div>;
}

في هذا المثال:

• useEffect() يجلب البيانات عند تصيير المكون لأول مرة وكلما تغيرت خاصية url.
• المعامل الثاني لـ useEffect() هو مصفوفة من الاعتماديات. إذا تغيرت أي من الاعتماديات، فسيتم إعادة تشغيل التأثير.
• يُستخدم useState() Hook لإدارة حالة المكون.

تحسين أداء التصيير في React

التصيير الفعال أمر بالغ الأهمية لبناء تطبيقات React عالية الأداء. إليك بعض التقنيات لتحسين أداء التصيير:

1. منع إعادة التصيير غير الضرورية

إحدى أكثر الطرق فعالية لتحسين أداء التصيير هي منع عمليات إعادة التصيير غير الضرورية. إليك بعض التقنيات لمنع إعادة التصيير:

• استخدام React.memo(): React.memo() هو مكون عالي الرتبة (higher-order component) يقوم بتخزين (memoizes) مكون وظيفي. يعيد تصيير المكون فقط إذا تغيرت خصائصه.
• تنفيذ shouldComponentUpdate(): في المكونات الصنفية، يمكنك تنفيذ دالة دورة الحياة shouldComponentUpdate() لمنع إعادة التصيير بناءً على تغييرات الخصائص أو الحالة.
• استخدام useMemo() و useCallback(): يمكن استخدام هذين الـ Hooks لتخزين القيم والدوال، مما يمنع إعادة التصيير غير الضرورية.
• استخدام هياكل بيانات غير قابلة للتغيير (immutable): تضمن هياكل البيانات غير القابلة للتغيير أن التغييرات على البيانات تنشئ كائنات جديدة بدلاً من تعديل الكائنات الحالية. هذا يسهل اكتشاف التغييرات ومنع إعادة التصيير غير الضرورية.

2. تقسيم الكود (Code-Splitting)

تقسيم الكود هو عملية تقسيم تطبيقك إلى أجزاء أصغر يمكن تحميلها عند الطلب. يمكن أن يقلل هذا بشكل كبير من وقت التحميل الأولي لتطبيقك.

توفر React عدة طرق لتنفيذ تقسيم الكود:

• استخدام React.lazy() و Suspense: تسمح لك هذه الميزات باستيراد المكونات ديناميكيًا، وتحميلها فقط عند الحاجة إليها.
• استخدام الاستيراد الديناميكي (dynamic imports): يمكنك استخدام الاستيراد الديناميكي لتحميل الوحدات (modules) عند الطلب.

3. المحاكاة الافتراضية للقوائم (List Virtualization)

عند تصيير قوائم كبيرة، قد يكون تصيير جميع العناصر مرة واحدة بطيئًا. تسمح لك تقنيات المحاكاة الافتراضية للقوائم بتصيير العناصر المرئية حاليًا على الشاشة فقط. مع تمرير المستخدم، يتم تصيير عناصر جديدة وإلغاء تحميل العناصر القديمة.

هناك العديد من المكتبات التي توفر مكونات المحاكاة الافتراضية للقوائم، مثل:

• react-window
• react-virtualized

4. تحسين الصور

غالبًا ما تكون الصور مصدرًا مهمًا لمشكلات الأداء. إليك بعض النصائح لتحسين الصور:

• استخدام تنسيقات صور محسّنة: استخدم تنسيقات مثل WebP لضغط وجودة أفضل.
• تغيير حجم الصور: قم بتغيير حجم الصور إلى الأبعاد المناسبة لحجم عرضها.
• التحميل الكسول للصور (Lazy load): قم بتحميل الصور فقط عندما تكون مرئية على الشاشة.
• استخدام CDN: استخدم شبكة توصيل المحتوى (CDN) لخدمة الصور من خوادم أقرب جغرافيًا إلى المستخدمين.

5. التحليل والتصحيح (Profiling and Debugging)

توفر React أدوات لتحليل وتصحيح أداء التصيير. يسمح لك محلل React (React Profiler) بتسجيل وتحليل أداء التصيير، وتحديد المكونات التي تسبب اختناقات في الأداء.

توفر إضافة متصفح React DevTools أدوات لفحص مكونات React وحالتها وخصائصها.

أمثلة عملية وأفضل الممارسات

مثال: تخزين مكون وظيفي (Memoizing)

خذ بعين الاعتبار مكونًا وظيفيًا بسيطًا يعرض اسم مستخدم:

function UserProfile({ user }) {
  console.log('Rendering UserProfile');
  return <div>{user.name}</div>;
}

لمنع هذا المكون من إعادة التصيير بشكل غير ضروري، يمكنك استخدام React.memo():

import React from 'react';

const UserProfile = React.memo(({ user }) => {
  console.log('Rendering UserProfile');
  return <div>{user.name}</div>;
});

الآن، لن يتم إعادة تصيير UserProfile إلا إذا تغيرت خاصية user.

مثال: استخدام useCallback()

خذ بعين الاعتبار مكونًا يمرر دالة رد نداء (callback) إلى مكون فرعي:

import React, { useState } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>Click me</button>;
}

في هذا المثال، يتم إعادة إنشاء دالة handleClick في كل مرة يتم فيها تصيير ParentComponent. هذا يتسبب في إعادة تصيير ChildComponent بشكل غير ضروري، حتى لو لم تتغير خصائصه.

لمنع ذلك، يمكنك استخدام useCallback() لتخزين دالة handleClick:

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // Only re-create the function if the count changes

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>Click me</button>;
}

الآن، لن يتم إعادة إنشاء دالة handleClick إلا إذا تغيرت حالة count.

مثال: استخدام useMemo()

خذ بعين الاعتبار مكونًا يحسب قيمة مشتقة بناءً على خصائصه:

import React, { useState } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = items.filter(item => item.name.includes(filter));

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

في هذا المثال، يتم إعادة حساب مصفوفة filteredItems في كل مرة يتم فيها تصيير MyComponent، حتى لو لم تتغير خاصية items. قد يكون هذا غير فعال إذا كانت مصفوفة items كبيرة.

لمنع ذلك، يمكنك استخدام useMemo() لتخزين مصفوفة filteredItems:

import React, { useState, useMemo } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = useMemo(() => {
    return items.filter(item => item.name.includes(filter));
  }, [items, filter]); // Only re-calculate if the items or filter changes

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

الآن، لن يتم إعادة حساب مصفوفة filteredItems إلا إذا تغيرت خاصية items أو حالة filter.

الخاتمة

يعد فهم عملية التصيير في React ودورة حياة المكونات أمرًا ضروريًا لبناء تطبيقات عالية الأداء وقابلة للصيانة. من خلال الاستفادة من تقنيات مثل التخزين (memoization) وتقسيم الكود والمحاكاة الافتراضية للقوائم، يمكن للمطورين تحسين أداء التصيير وإنشاء تجربة مستخدم سلسة وسريعة الاستجابة. مع إدخال الـ Hooks، أصبحت إدارة الحالة والتأثيرات الجانبية في المكونات الوظيفية أكثر بساطة، مما يعزز مرونة وقوة تطوير React. سواء كنت تبني تطبيق ويب صغيرًا أو نظامًا كبيرًا للمؤسسات، فإن إتقان مفاهيم التصيير في React سيحسن بشكل كبير من قدرتك على إنشاء واجهات مستخدم عالية الجودة.

مصادر إضافية

• توثيق React حول تصيير العناصر
• توثيق React حول الحالة ودورة الحياة
• توثيق React حول الـ Hooks
• توثيق React حول تحسين الأداء